import Link from 'next/link';
import { projects } from './data';
import { services } from '../services/data';

export const metadata = {
  title: '项目案例 | 余莉莎',
  description: '余莉莎的专业项目案例展示，包括数据安全、青少年教育、新媒体运营等多个领域的成功案例',
};

export default function ProjectsPage() {
  // 获取所有项目类别（基于服务类别）
  const serviceCategories = services.map(service => ({
    id: service.id,
    title: service.title,
  }));

  // 按类别对项目进行分组
  const projectsByCategory = serviceCategories.map(category => {
    const categoryProjects = projects.filter(project => project.serviceCategory === category.id);
    return {
      ...category,
      projects: categoryProjects,
    };
  }).filter(category => category.projects.length > 0); // 只显示有项目的类别

  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-primary-600 mb-2 text-center">项目案例</h1>
        <p className="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
          以下是我在各个专业领域完成的部分代表性项目，展示了我的专业能力和解决问题的方法
        </p>

        {/* 特色项目 */}
        <section className="mb-16">
          <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
            特色项目
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {projects
              .filter(project => project.featured)
              .map(project => (
                <Link key={project.id} href={`/projects/${project.id}`} className="block">
                  <div className="bg-white rounded-lg shadow-md overflow-hidden h-full hover:shadow-lg transition-shadow">
                    <div className="h-48 bg-gray-200 relative">
                      <img
                        src={project.coverImage || '/images/Photo01.jpg'}
                        alt={project.title}
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute bottom-0 left-0 bg-primary-500 text-white px-3 py-1 text-sm">
                        {services.find(s => s.id === project.serviceCategory)?.title}
                      </div>
                    </div>
                    <div className="p-5">
                      <h3 className="text-xl font-semibold text-gray-800 mb-2">{project.title}</h3>
                      <p className="text-gray-600 mb-3">{project.description}</p>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-500 text-sm">{project.client}</span>
                        <span className="text-primary-500 flex items-center">
                          查看详情
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 ml-1"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                          >
                            <path
                              fillRule="evenodd"
                              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
          </div>
        </section>

        {/* 按类别分组的项目 */}
        {projectsByCategory.map(category => (
          <section key={category.id} className="mb-16">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
              {category.title}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {category.projects.map(project => (
                <Link key={project.id} href={`/projects/${project.id}`} className="block">
                  <div className="bg-white rounded-lg shadow-md overflow-hidden h-full hover:shadow-lg transition-shadow">
                    <div className="h-48 bg-gray-200 relative">
                      <img
                        src={project.coverImage || '/images/Photo01.jpg'}
                        alt={project.title}
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute top-0 right-0 bg-primary-100 text-primary-800 px-2 py-1 text-sm">
                        {project.year}
                      </div>
                    </div>
                    <div className="p-5">
                      <h3 className="text-xl font-semibold text-gray-800 mb-2">{project.title}</h3>
                      <p className="text-gray-600 mb-3">{project.description}</p>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-500 text-sm">{project.client}</span>
                        <span className="text-primary-500 flex items-center">
                          查看详情
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 ml-1"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                          >
                            <path
                              fillRule="evenodd"
                              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
} 